<template>
    <div class="container">
        <el-form ref="form" :model="taskInfo" label-width="80px" size="mini">
            <el-row :gutter="20">
                <el-col :span="19">
                    <el-form-item label="任务名称">
                        <el-input v-model="taskInfo.task_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <div>
                        <el-button type="primary" size="mini"  @click="go('editzbpz',jumpData)">指标配置</el-button>
                        <el-button type="primary" size="mini" @click="rwHandle()">任务配置</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="任务描述">
                        <el-input type="textarea" v-model="taskInfo.task_desc" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="创建时间">
                        <el-input v-model="taskInfo.create_time" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人">
                        <el-input v-model="taskInfo.create_by" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="title">
                        执行记录
                    </div>
                    <my-table v-loading="zxloading" ref="zxmyEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="zxtableColumns" :tableData="zxtableDatas" :pageNum="queryObj.zxpageNo" :pageSize="queryObj.zxpageSize" :totalPage="zxtotal" :height="$store.state.app.windowHeight - 400" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" @onSelectionChange="onSelectionChange" />

                </el-col>
            </el-row>
            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit" v-loading="submitLoding">保存</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>

        <el-dialog title="任务配置" :visible.sync="dialogVisible" append-to-body width="840px" destroy-on-close top="6vh">
            <div style="padding:20px;">
                <el-form :model="rwform" size="mini" label-width="100px">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="启动日期">
                                <el-date-picker v-model="rwform.start_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束日期">
                                <el-date-picker v-model="rwform.end_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="执行任务频率">
                                <el-row :gutter="20">
                                   
                                    <el-col :span="5">
                                        <el-select v-model="rwform.month" placeholder="月" clearable>
                                            <el-option v-for="item in monthOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <!-- <el-input v-model="rwform.jgnum" placeholder="月"></el-input> -->
                                    </el-col>
                                    <el-col :span="5">
                                        <el-select v-model="rwform.dd" placeholder="日" clearable>
                                            <el-option v-for="item in dayOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-select v-model="rwform.hh" placeholder="时" clearable>
                                            <el-option v-for="item in hhOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-select v-model="rwform.mm" placeholder="分" clearable>
                                            <el-option v-for="item in ddOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>

                            </el-form-item>
                        </el-col>
                        <el-col :span="12">

                        </el-col>
                    </el-row>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="confirm">确定</el-button>
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>

            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addMonitorTask, queryTaskExtInfo, updateTaskExtInfo, queryExeRecordByBatchId } from '@/api/znjk/znjk'

export default {
    props: {
        rowData: {
            type: Object,
            default: false
        }

    },

    data() {
        return {
            dialogVisible: false,
            zbdialogVisible: false,
            submitLoding: false,
            taskInfo: {
                task_name: '',
                task_desc: '',
                create_time: '',
                create_by: '',
            },
            rwform: {
                start_time: '',
                end_time: '',
                year: '',
                month: '',
                dd: '',
                hh: '',
                mm: '',
                cron_expression: ''
            },
            rwFlag: false,
            monthOption: [],
            dayOption: [],
            hhOption: [],
            ddOption: [],


            //执行记录
            zxloading: false,
            zxtableColumns: [
                {
                    label: '开始时间',
                    prop: 'startTime',
                    align: 'center',
                },
                {
                    label: '结束时间',
                    prop: 'endTime',
                    align: 'center',
                },
                {
                    label: '执行结果',
                    prop: 'exeResult',
                    align: 'center',
                    minWidth: 80,
                }
            ],
            zxtableDatas: [],
            zxtotal: 0,
            selectedRows: [],
            queryObj: {
                zxpageNo: 1,
                zxpageSize: 20
            },
            jumpData: { zbtype: 'edit', rowData: {}, queryTaskExtInfo: {} },
            dqyMcxxList: [],
            quotasInfoList: []

        }
    },
    mounted() {
        this.initOption()

        console.log('this.rowData', this.rowData)
        this.taskInfo = this.rowData.rowData
        this.rwform.end_time = this.rowData.rowData.end_time
        this.rwform.start_time = this.rowData.rowData.start_time
        this.rwform.cron_expression = this.rowData.rowData.cron_expression
        let cron_expressionData =this.rowData.rowData.cron_expression!=null?this.rowData.rowData.cron_expression.split(" "):'* * * * 1 ?'
        console.log(cron_expressionData)
        // this.rwform.year = cron_expressionData[0] == '*' ? '' : cron_expressionData[0]
        this.rwform.month = cron_expressionData[3] == '*' ? '' : cron_expressionData[3]
        this.rwform.dd = cron_expressionData[2] == '*' ? '' : cron_expressionData[2]
        this.rwform.hh = cron_expressionData[1] == '*' ? '' : cron_expressionData[1]
        this.rwform.mm = cron_expressionData[0] == '*' ? '' : cron_expressionData[0]
        this.jumpData.rowData = this.rowData.rowData

        if (this.rowData.editType != 'edit') {
            this.getqueryTaskExtInfo()
        } else {
            this.dqyMcxxList = this.rowData.queryTaskExtInfo.dqyMcxxList
            this.quotasInfoList = this.rowData.queryTaskExtInfo.quotasInfoList

            this.jumpData = this.rowData
            console.log(this.jumpData)


        }

        if (this.rwform.cron_expression != '') {
            this.rwFlag = true
        }


        this.getqueryExeRecordByBatchId()
    },
    methods: {
        initOption() {
            for (let m = 1; m <= 12; m++) {
                this.monthOption.push({
                    label: m,
                    value: m
                })
            }
            for (let i = 1; i <= 31; i++) {
                this.dayOption.push(
                    {
                        label: i,
                        value: i
                    }
                )
            }
            this.dayOption.push({
                label: 'L',
                value: 'L'
            })

            for (let i = 0; i < 24; i++) {
                this.hhOption.push(
                    {
                        label: i,
                        value: i
                    }
                )
            }
            for (let i = 0; i < 60; i++) {
                this.ddOption.push(
                    {
                        label: i,
                        value: i
                    }
                )
            }

        },
        getqueryExeRecordByBatchId() {
            this.zxloading = true
            let param = {
                task_id: this.rowData.rowData.task_id,
                pageNum: this.queryObj.zxpageNo,
                pageSize: this.queryObj.zxpageSize,
            }
            queryExeRecordByBatchId({ task_id: this.rowData.rowData.task_id }).then(res => {
                this.zxloading = false
                if (res.code == 200) {
                    this.zxtableDatas = res.data.records
                    this.zxtotal = res.data.total
                }
            })
        },
        onSubmit() {
            if (this.taskInfo.task_name == '') {
                this.$message.error('请输入任务名称')
                return false
            }
            if (this.taskInfo.task_desc == '') {
                this.$message.error('请输入任务描述')
                return false
            }

            console.log(this.dqyMcxxList.length <= 0)
            console.log(this.quotasInfoList.length <= 0)
            if (this.dqyMcxxList.length <= 0) {
                this.$message.error('请进行指标配置')
                return false
            }
            if (this.quotasInfoList.length <= 0) {
                this.$message.error('请进行指标配置')
                return false
            }
            console.log(this.rwFlag)
            if (!this.rwFlag) {
                this.$message.error('请进行任务配置')
                return false
            }
            let params = {
                quotasInfoList: this.quotasInfoList,
                taskEnterpriseInfoList: this.dqyMcxxList,
                taskInfo: {
                    ...this.taskInfo,
                    ...this.rwform

                }
            }
            this.submitLoding = true
            updateTaskExtInfo(params).then(res => {
                if (res.code == 200) {
                    this.submitLoding = false
                    this.$message.success('保存成功')
                    this.go('list')
                }
            })
        },
        getqueryTaskExtInfo() {
            queryTaskExtInfo({ task_id: this.rowData.rowData.task_id }).then(res => {
                console.log(res)
                this.jumpData.queryTaskExtInfo = res.data

                this.dqyMcxxList = res.data.dqyMcxxList
                this.quotasInfoList = res.data.quotasInfoList
            })
        },
        // 任务配置保存
        confirm() {
            if (this.rwform.start_time == '') {
                this.$message.error('请选择启动时间!')
                return false
            }
            if (this.rwform.end_time == '') {
                this.$message.error('请选择结束时间!')
                return false
            }
            let cron_expression = [
                this.rwform.mm ? this.rwform.mm : '*',
                this.rwform.hh ? this.rwform.hh : '*',
                this.rwform.dd ? this.rwform.dd : '*',
                this.rwform.month ? this.rwform.month : '*',
                
                
                
            ]
            let num = 0
            for (let i = 0; i < cron_expression.length; i++) {
                if (cron_expression[i] == '*') {
                    num++
                }
            }
            if (num == 4) {
                this.$message.error('请输入执行任务频率!')
                return false
            } else {
                this.rwform.cron_expression = cron_expression.join(' ') + " ?"
            }
            this.rwFlag = true
            this.dialogVisible = false
        },
        rwHandle() {

            this.dialogVisible = true
        },
        zbHandle() {
            this.zbdialogVisible = true
        },

        changepageNo(currPage) {
            this.queryObj.zxpageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.zxpageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .timeSelct {
        .el-input {
            display: inline;
        }
    }

    .el-dialog .el-dialog__body .el-form .el-select {
        display: inline !important;
    }

    ::v-deep .el-dialog .el-dialog__body .el-form .el-form-item__content {
        width: calc(100% - 100px);
    }
}
</style>